<template>
  <div class="managementItem" @click="toDetail(2)">
    <div class="content">
      <!-- <div class="left">
        <img src="../assets/logo.png" alt />
      </div> -->
      <div class="right">
        <div class="left">
          <img src="../assets/logo.png" alt />
          <!-- <span>HAHAH</span> -->
        </div>
        <div class="row">
          <span>昵称：</span>
          <span>发撒发</span>
        </div>
        <div class="row">
          <span>子账号：</span>
          <span>134250000</span>
        </div>
        <div class="row">
          <span>手机号码：</span>
          <span>18736253722</span>
        </div>
        <div class="row">
          <span>姓名：</span>
          <span>****</span>
        </div>
        <div class="row">
          <span>部门：</span>
          <span>业务部深圳龙华富士康驻厂1111</span>
        </div>
        <div class="row">
          <span>职位：</span>
          <span>业务部深圳龙华富士康驻厂</span>
        </div>
        <div class="row">
          <span>数据权限：</span>
          <span>业务部深圳龙华富士康驻厂</span>
        </div>
        <div class="row">
          <span>操作权限：</span>
          <span>业务部深圳龙华富士康驻厂</span>
        </div>
      </div>
    </div>
    <!-- 选择器 -->
  </div>
</template>

<script>
export default {
  components: {},
  methods: {
    // 1--新建账号，2--查看账号
    toDetail(index) {
      this.$router.push({
        path: `/companyNewAccount/${index}`,
        query:{
          //todo子账号Id
          accountId:'111'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.managementItem {
  background: white;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 2px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto,
    'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    padding-left:20px;
    .left {
      width: 60px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .right {
      width: calc(100% - 60px);
      .row {
        margin: 7px 0;
        font-size: 14px;
        display: flex;
        width: 100%;
        align-items: center;
        span {
          &:first-child {
            margin-right: 5px;
            white-space: nowrap;
            // text-overflow: ellipsis;
            // overflow: hidden;
            color: #646566;
            width: 70px;
            flex-shrink: 0;
            // border-right: 1px solid #a7a7a7;
          }
          &:last-child {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            input {
              color: #323233;
            }
          }
        }
      }
    }
  }
}
</style>